<!-- 开通VIP会员 -->
<template>
	<view class="page">
		<u-navbar :isFixed="true" title="开通VIP会员" :borderBottom="false"></u-navbar>
		<view class="card flex_align">
			<image :src="users.image"></image>
			<view>
				<view class="name">{{users.name}}</view>
				<view>{{users.subtitle}}</view>
			</view>
		</view>
		<view class="wrap">
			<view class="title">{{users.name}}权益</view>
			<view class="grid">
				<view class="item" v-for="(item,index) in users.legalright" :key="index">
					<image class="img" :src="item.image"></image>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="content">
			<scroll-view scroll-x="true">
				<view class="item" v-for="(item,index) in users.selectcard" :key="item.id" :class="cardindex==index?'opt':''" @click="cardindex=index">
					<view class="title">{{item.name}}</view>
					<view>
						<view>{{item.money}}元</view>
						<view>或{{item.integral}}积分</view>
					</view>
				</view>
			</scroll-view>
			
		</view>
		<view class="msg" v-if="cardindex>=0">
			<view class="flex_bet_align item">
				<view class="name">有效期：</view>
				<view>{{users.selectcard[cardindex].starttime}}~{{users.selectcard[cardindex].endtime}}</view>
			</view>
			<view class="flex_bet_align item" v-if="users.selectcard[cardindex].integral>0">
				<view class="name">抵积分</view>
				<view>￥{{users.selectcard[cardindex].integral}}</view>
			</view>
			<view class="flex_bet_align item">
				<view class="name">待支付</view>
				<view>￥{{users.selectcard[cardindex].money}}</view>
			</view>
		</view>
		<view class="operate flex_align">
			<view class="integral" v-if="users.selectcard[cardindex].integral>0" @click="exchange">积分兑换</view>
			<view class="foot" @click="submit">立即支付</view>
		</view>
	</view>
</template>

<script>
	var _this,shak;
	export default {
		data() {
			return {
				id:0,
				users:{},
				cardindex:0,
			}
		},
		onLoad(options) {
			_this = this
			_this.id=options.id
			_this.getdata()
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("memberdetails", {
					id:_this.id
				}).then(data => {
					_this.users = data
				});
			},
			
			submit(){
				_this.click_shake(()=>{
					if(_this.cardindex<0){
						uni.showToast({
							title:"请选择会员类型",
							icon:"none"
						})
					}else{
						uni.navigateTo({
							url:"/personal/lookPayVip?mid="+_this.id+"&type_id="+_this.users.selectcard[_this.cardindex].id+"&money="+_this.users.selectcard[_this.cardindex].money
						})
					}
				})
			},
			// 防抖点击
			click_shake(fn){
				if(!_this.shake){
					fn && typeof fn === 'function' && fn()
					_this.shake=true
					setTimeout(function(){
						_this.shake=false
					},500)
				}
			},
			exchange(){
				uni.showModal({
				    content: '确认使用积分兑换',
				    success: function (res) {
				        if (res.confirm) {
				            _this.$api.post("playmember", {
				            	mid:_this.id,
				            	money:_this.users.selectcard[_this.cardindex].money,
				            	type_id:_this.users.selectcard[_this.cardindex].id,
				            	pay_type:4,
				            	pay_tuneup_type:1
				            }).then(data => {
				            	wx.showModal({
									content: '兑换成功',
									showCancel: false,
									success: function (res) {
										if (res.confirm) {
											uni.reLaunch({
												url:"/pages/personal/personal"
											})
										}
									}
								})
				            });
				        }
				    }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>

	.card {
		width: 700rpx;
		height: 220rpx;
		margin: 0 auto;
		padding-left: 60rpx;
		background: linear-gradient(90deg, #fae3cd, #deab7e 99%);
		border-radius: 16rpx;
		font-size: 24rpx;
		font-weight: 700;
		color: #000000;

		image {
			width: 90rpx;
			height: 104rpx;
			// background-color: #EEEEEE;
			// box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(233, 181, 137, 0.77);
			margin-right: 30rpx;
		}

		.name {
			font-size: 36rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 10rpx;
		}
	}

	.wrap {
		padding-top: 40rpx;

		.title {
			padding-left: 26rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 24rpx;
		}

		.grid{
			display: grid;
			padding-top:28rpx;
			grid-template-columns: repeat(4,25%);
			.item{
				margin:15rpx 0;
				text-align: center;
				.img{
					width: 120rpx;
					height: 120rpx;
					margin:0 auto;
					background: #fcead8;
					border-radius: 60rpx;
				}
				.name{
					width: 120rpx;
					margin:0 auto;
					text-align: center;
					margin-top:10rpx;
					font-size: 24rpx;
					font-weight: 700;
					color: #000000;
				}
			}
		}
	}

	.block {
		height: 22rpx;
		background-color: #F6F6F6;
	}

	.content {
		padding: 32rpx 0 0 26rpx;
		width:100%;
		white-space: nowrap;
		.item {
			min-width: 200rpx;
			height: 234rpx;
			display: inline-block;
			background: linear-gradient(91deg, #f6ddc4 0%, #e7bf9a 100%);
			border-radius: 16rpx;
			margin-right: 20rpx;
			padding:28rpx 14rpx;
			font-size: 24rpx;
			font-weight: 700;
			color: #a76429;
			.title{
				font-size: 36rpx;
				font-weight: 700;
				color: #a76429;
				margin-bottom: 16rpx;
			}
			&.opt{
			background: linear-gradient(91deg, #E7EBFE 0%, #CFD4F3 100%);
			}
		}
	}
	.msg{
		padding:0 26rpx;
		.item{
			margin-top:36rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
			padding-bottom: 20rpx;
			.name{
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
			}
		}
	}
	.operate{
		width: 90%;
		margin: 0 5%;
		border-radius: 50rpx;
		overflow: hidden;
		height: 88rpx;
		margin-bottom:env(safe-area-inset-bottom) ;
	}
	.integral{
		width: 100%;
		height: 88rpx;
		background-color: #A1A1A1;
		color: #2A2928;
		line-height: 88rpx;
		text-align: center;
		font-weight: 700;
		font-size: 28rpx;
	}
	.foot{
		width: 100%;
		height: 88rpx;
		background: #2f2b20;
		font-size: 28rpx;
		font-weight: 700;
		text-align: center;
		line-height: 88rpx;
		color: #ffffff;
	}
</style>
